<template>
	<d-wrap :title="title">
		<div class='form' slot="body">
			<Form ref="formInline" :model="formItem" :label-width="80" :rules="ruleInline">

				<div class='avatar'>
					<Upload class='upload' :style="'background:url('+ avatar +') no-repeat 0 0/cover'"
				        multiple
				        :action="action"
				        :on-success="success"
				        :on-error="error">
				        <Button type="ghost" icon="ios-cloud-upload-outline"></Button>
				    </Upload>
				    <p>用户头像(点击上传图片)</p>
				</div>
				<FormItem label="用户昵称" prop="nickname">
		            <Input v-model="formItem.nickname" placeholder="例如小红!!" clearable></Input>
		        </FormItem>
		        <FormItem label="真是姓名" prop="truename">
		            <Input v-model="formItem.truename" placeholder="例如王锦佳" clearable></Input>
		        </FormItem>
		        <FormItem label="地址" prop="address">
		            <Input v-model="formItem.address" placeholder="例如广东省揭阳市揭东区" clearable></Input>
		        </FormItem>
		        <FormItem label="性别">
		            <RadioGroup v-model="formItem.sex">
		                <Radio label="0">男</Radio>
		                <Radio label="1">女</Radio>
		            </RadioGroup>
		        </FormItem>
		        <FormItem label="你喜欢的">
		            <CheckboxGroup v-model="formItem.likes">
		                <Checkbox label="热血"></Checkbox>
		                <Checkbox label="睡觉"></Checkbox>
		                <Checkbox label="竞技"></Checkbox>
		                <Checkbox label="游戏"></Checkbox>
		                <Checkbox label="校园"></Checkbox>
		                <Checkbox label="你猜"></Checkbox>
		            </CheckboxGroup>
		        </FormItem>
		        <FormItem label="个性签名" prop="p_s">
		            <Input v-model="formItem.p_s" type="textarea" :autosize="{minRows: 2,maxRows: 3}" placeholder="这家伙很懒什么也不说！！！！"></Input>
		        </FormItem>
		        <FormItem>
		            <Button type="primary" @click="handleSubmit('formInline')">确定</Button>
		            <Button type="ghost" style="margin-left: 8px" @click="formItem={}">清空</Button>
		        </FormItem>
		    </Form>
		</div>
	</d-wrap>
</template>

<script>
	import Cookies 								from 'js-cookie'
	import DWrap   								from 'base/default-wrap'
	import Config 								from '../config/config'

	export default{
		components: {
			DWrap
		},
		computed: {
			action() {
				return Config.env === 'development' ? '/Api/Book/upload' : '/Home/File/uploadPicture'
			}
		},
		data() {
			return {
				title: '完善信息',
				avatar: '/static/images/icon.png',
				loading: true,
				formItem: {
                    nickname: '平平淡淡的相守',
                    truename: '王锦佳',
                    address : '广东揭阳',
                    sex: "0",
                    likes: ['你猜', '校园'],
                    p_s: '兵法谙熟于心。取胜千里之外'
                },
                ruleInline: {
                    nickname: [
                        { required: true, message: '不能为空！！', trigger: 'blur' }
                    ],
                    truename: [
                        { required: true, message: '不能为空！！', trigger: 'blur' }
                    ],
                    address: [
                    	{ required: true, message: '不能为空！！', trigger: 'blur' }
                    ],
                    p_s: [
                    	{ required: true, message: '不能为空！！', trigger: 'blur' }
                    ]
                },
                bInfo 		: {},
                nInfo 		: {},
                isChange 	: false
			}
		},
		created() {
		},
		activated() {
			this.getPerfect()
		},
		methods: {
			getPerfect() {
				this.HttpService.getPerfect().then(data => {
					let d = data.data
					if(!data.status) {
						this.formItem = d
						this.formItem.likes = d.likes.split(',')
						this.avatar   = d.headimgurl
					}
				})
			},
			handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params 			= this.formItem
                        	params.avatar 	= this.avatar

                        	this.HttpService.perfect(params).then(data => {
                        		if(!data.status) {
                        			this.$Message.success(data.msg, 2)
                        			setTimeout(() => {
                        				this.$router.push('/user/index')
                        			}, 2000)
                        		} else {
                        			this.$Message.error(data.msg)
                        		}
                        	}).catch((e) => {
                        		this.$Message.error('你没修改过哦')
                        	})
                    } else {
                        this.$Message.error('请检查是否有误');
                    }
                })
            },
			success(res, d1, d2) {
				const url = this.util.getRootPath() + 'static/' + res.data
				console.log(url)
				this.avatar = url
			},
			error() {
				console.log('error')
			}
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/login.styl"
	

	.form
		padding: 20px 20px 20px 0
		background-color: #fff
		border-radius: 6px
	.avatar
		margin-bottom: 20px
		text-align: center
		font-size: 0
		.upload, .ivu-upload-select
			position: relative
			display: inline-block
			width: 80px
			height: 80px
			margin: 0 auto
			border-radius: 50%
			transform: translate3d(20px, 0, 0)
			overflow: hidden
			text-align: center
			line-height: 92px
			background-size: 80px 80px
			box-shadow: 0 0 8px 1px #d1d1d1
		p
			margin-top: 8px
			font-size: 14px
			text-align: center
			transform: translate3d(20px, 0, 0)
		.icon
			font-size: 20px
			color: #fff
		button
			position: absolute
			left: 0
			top: 0
			right: 0
			bottom: 0
			width: 100%
			z-index: 2
			opacity: 0
</style>